<template>
  <!--<div class="container">-->
  <!--  <header class="admin-layouts-header">1</header>-->
  <!--  <router-view/>-->
  <!--</div>-->

  <a-layout class="admin-layout">
    <layout-header class="layout-header"></layout-header>
    <a-layout class="layout-container">
      <layout-sider></layout-sider>
      <a-layout-content class="layout-container-content">
        <div class="breadcrumb-container">
          <a-breadcrumb separator=">">
            <!--<a-breadcrumb-item>信息管理</a-breadcrumb-item>-->
            <a-breadcrumb-item v-for="item in $route.matched" :key="item.name">{{ item.meta.title }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <router-view />
      </a-layout-content>
    </a-layout>
    <a-layout-footer class="layout-footer"></a-layout-footer>
  </a-layout>
</template>

<script>
import LayoutHeader from "@/components/layoutHeader";
import LayoutSider from "@/components/layout-sider";
export default {
  name: "adminLayout",
  components: { LayoutHeader, LayoutSider },
  created() {
    console.log(this.$route)
  }
};
</script>

<style scoped lang="less">
.container {
  .admin-layout-header {
    height: 160px;
    background: url("~@/assets/img/layout/layout-header-bg.png") no-repeat top /
      100%;
  }
}
.admin-layout {
  height: 100vh;
  background: #20294B;
  color: #fff;

  .layout-header {
  }

  .layout-container {
    background-color: transparent;
  }
  .layout-footer {
    height: 48px;
    padding: 0;
    background: url("~@/assets/img/layout/layout-footer-bg.png") no-repeat
      bottom / 86% 100%;
    background-color: transparent;
    z-index: 9;
  }
}
</style>
